<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="titlefood">
				<view class="one">
					<text>{{title}}</text>
				</view>
				<view class="two">
					<text>{{date}}</text>
				</view>
				<view class="tree">
					<text>{{title}}发布</text>
				</view>
			</view>
			<view class="foodtree">
				<view class="onefood">
					<view class="onefoodcenter">
						<text>早餐</text>
					</view>
				</view>
				<view class="onefood">
					<view class="onefoodcenter">
						<text>午餐</text>
					</view>
				</view>
				<view class="onefood">
					<view class="onefoodcenter">
						<text>下午点心</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[0]||lunch[0]|| dessert[0]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周一</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[0]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[0]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[0]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[1]||lunch[1]|| dessert[1]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周二</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[1]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[1]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[1]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[2]||lunch[2]|| dessert[2]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周三</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[2]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[2]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[2]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[3]||lunch[3]|| dessert[3]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周四</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[3]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[3]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[3]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[4]||lunch[4]|| dessert[4]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周五</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[4]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[4]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[4]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[5]||lunch[5]|| dessert[5]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周六</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[5]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[5]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[5]}}</text>
					</view>
				</view>
			</view>
			<view class="weekfood" v-if="breakfast[6]||lunch[6]|| dessert[6]">
				<view class="weekfoodone">
					<view class="weekfoodcenter weekfoodtwo">
						<text>周日</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{breakfast[6]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{lunch[6]}}</text>
					</view>
				</view>
				<view class="weekfoodone">
					<view class="weekfoodcenter">
						<text>{{dessert[6]}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},

		data() {
			return {
				cook_id: 0,
				title: '',
				date: '',
				author: '',
				breakfast: [],
				lunch: [],
				dessert: []
			}
		},
		methods: {
			weekfoodxiangqing() {
				console.log(this.userInfo)
				this.$store
					.dispatch('weekfoodxiangqing', {
						cook_id: this.cook_id,
						token: this.userInfo.token,
					})
					.then(res => {
						this.title = res.data.data.title
						this.date = res.data.data.date
						this.author = res.data.data.author
						this.breakfast = res.data.data.breakfast
						this.lunch = res.data.data.lunch
						this.dessert = res.data.data.dessert
					});
			}
		},
		onLoad(data) {
			this.cook_id = data.id


		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									this.weekfoodxiangqing()
								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}

			} else {
				this.weekfoodxiangqing()
			}
		}

	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/blue.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.titlefood {
			display: flex;
			flex-direction: column;

			.one {
				margin-bottom: 15rpx;
			}

			.one,
			.two,
			.tree {
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 40rpx;
			}

			.two,
			.tree {
				color: #76c7fc;
				font-size: 26rpx;
			}

			.tree {
				text-align: right;
			}
		}

		.foodtree {
			width: 100%;
			height: 85rpx;

			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;

			.onefood {
				width: 25%;
				height: 100%;

				padding: 5rpx;
				box-sizing: border-box;

				.onefoodcenter {
					width: 100%;
					height: 100%;
					background-color: #ffc173;
					border-radius: 10rpx;
					color: #0a98f7;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 27rpx;
				}
			}
		}

		.weekfood {
			width: 100%;
			height: 135rpx;
			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;

			.weekfoodone {
				width: 25%;
				height: 100%;
				padding: 5rpx;
				box-sizing: border-box;

				.weekfoodcenter {
					width: 100%;
					height: 100%;
					background-color: #fff;
					border-radius: 10rpx;
					color: #0a98f7;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
				}

				.weekfoodtwo {
					background-color: #fea74b;
					font-size: 30rpx;
					color: #fff;
				}
			}

		}


	}
</style>
